<template>
  <div class="order-body">
    <!-- header -->
    <shop-header>我的团队</shop-header>

    <div class="order-tabs">
      <ul>
        <li v-for="(tab, key) in tabs" :key="key" :class="{'is-tabs-active': (key === index)}" @click="changeTab(key)">
          <p>{{ tab }}</p>
          <p class="order-tabs-line"></p>
        </li>
      </ul>
    </div>
    <div style="height: 47px;"></div>

    <div v-if="index === 0">
      <div class="user-list">
        <ul>
          <li>
            <div class="user-list-cell">
              <div class="title-date">日期</div>
              <div class="title-total">积分</div>
              <div class="detail">&nbsp;</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="user-list">
        <ul>
          <li v-for="(item, key) in data.dailyInfo" :key="key" @click="gotoDailyDetail(item.reward_date)">
            <div class="user-list-cell">
              <div class="type-date">{{ item.reward_date }}</div>
              <div class="type-total">{{ item.total }}</div>
              <div class="detail">[详细]</div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div v-if="index === 1">
      <div style="padding:10px 0;font-size: 14px">我的团队盒数:{{ data.teamData.teamNum }}</div>
      <div class="user-list">
        <team_item v-for="(item, key) in data.teamData.memberList" :member-info="item" :key="key"></team_item>
      </div>
    </div>

    <div v-if="index === 2">
      <div class="user-list">
        <ul>
          <li>
            <div class="user-list-cell" style="font-weight: bold;">
              <div class="type-date">团队成员</div>
              <div class="detail">盒数</div>
              <div class="type-total">购买时间</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="user-list">
        <ul>
          <li v-for="(item, key) in data.teamOrders" :key="key">
            <div class="user-list-cell">
              <div class="type-date">{{ item.member_name }}·{{ item.mobile }}</div>
              <div class="detail" style="font-weight: normal">{{ item.product_count }}</div>
              <div class="type-total">{{ item.create_time }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div v-if="index === 3">
      <div class="user-list">
        <ul>
          <li>
            <div class="user-list-cell" style="font-weight: bold;">
              <div class="type-date">团队成员</div>
              <div class="detail">盒数</div>
              <div class="type-total">时间</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="user-list">
        <ul>
          <li v-for="(item, key) in data.fiftyOrders" :key="key">
            <div class="user-list-cell">
              <div class="type-date">{{ item.member_name }}·{{ item.mobile }}</div>
              <div class="detail" style="font-weight: normal">{{ item.count }}</div>
              <div class="type-total">{{ item.create_time }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../components/header';
import {Indicator} from "mint-ui";
import request from "../utils/request";
import team_item from '../components/team_item';

export default {
  components: {
    team_item,
    shopHeader: Header,
  },
  data() {
    return {
      tabs: ['团队积分', '团队架构', '团队订单', '沉淀盒数(50)'],
      index: 0,
      data: {
        dailyInfo: [
          {
            reward_date: '',
            total: 0
          }
        ],
        teamOrders: [
          {
            member_name: '',
            mobile: '',
            product_count: 0,
            create_time: ''
          }
        ],
        teamData: {
          teamNum: 0,
          memberList: []
        },
        fiftyOrders: [
          {
            member_name: '',
            mobile: '',
            count: 0,
            create_time: ''
          }
        ]
      }

    }
  },
  async created() {
    let index = this.$route.query.index;
    this.index = parseInt(index || 0);
    Indicator.open();
    const res = await request({}, "/ajax/member/teamInfo");
    if(res && res.code == 0){
      Indicator.close();
      this.data = res.data;
    }
  },
  methods: {
    changeTab(key) {
      this.index = key;
    },
    gotoDailyDetail(date) {
      this.$router.push({
        path: '/team-detail',
        query:{date: date}
      });
    }
  },
}
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}
.order-body {
  min-height: 100vh;
  background-color: #F3F3F3;
  padding-bottom: 50px;
}
.order-tabs {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 48px;
  background-color: #fff;
  width: 100%;
}
.order-tabs > ul {
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  overflow: auto;
}
.order-tabs > ul > li {
  list-style: none;
  flex: 1;
  padding: 10px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.order-tabs > ul > li.is-tabs-active {
  color: #F49D4D;
}
.order-tabs > ul > li.is-tabs-active > .order-tabs-line{
  width: 20%;
  height: 2px;
  background-color: #F49D4D;
  margin-top: 5px;
}

.user-list {
  font-size: 14px;
  padding-left: 15px;
  padding-right: 15px;
}

.user-list > ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid #D9D9D9;
}

.user-list > ul > li {
  list-style: none;
  text-align: left;
  font-size: 14px;
  justify-content: flex-end;
  border-bottom: 1px solid #D9D9D9;
}
.user-list-cell {
  width: 100%;
  padding: 10px 0;
  align-items: center;
  text-align: center;
}

.user-list > ul > li:last-child > .user-list-cell {
  border: 0;
}

.user-list-cell .type-date {
  width: 40%;
  display: inline-block;
}
.user-list-cell .type-total {
  width: 40%;
  display: inline-block;
}
.user-list-cell .title-date {
  width: 40%;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}
.user-list-cell .title-total {
  width: 40%;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}
.user-list-cell .detail {
  width: 15%;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
}
</style>
